<template>
  <el-card>
    <el-col class="toolbar">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="search.code" placeholder="货单编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="search.orderId" placeholder="订单号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="search.courierName" placeholder="承运人姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="search.address" placeholder="收货地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="page.rows" highlight-current-row stripe border v-loading="listLoading" style="width: 100%;">
      <el-table-column prop="code" label="货单编号"></el-table-column>
      <el-table-column prop="orderId" label="订单号"></el-table-column>
      <el-table-column prop="courierName" label="承运人姓名"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="receiverAddress" label="收货地址"></el-table-column>
      <el-table-column label="操作" width="80">
        <template scope="scope">
          <el-button title="详情" icon="information" size="mini" @click="handleDetail(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-col :span="24" class="toolPage">
      <el-pagination :current-page="page.current" :page-sizes="[10, 20, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total" style="float:right" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
    </el-col>
  </el-card>
</template>

<script>
  export default {
    created() {
      this.loadGridData();
    },
    data() {
      return {
        page: {
          total: 0,
          current: 1,
          size: 10,
          rows: []
        },
        search: {
          code: '',
          orderId: '',
          courierName: '',
          address: ''
        },
        listLoading: true
      }
    },
    methods: {
      handleSizeChange(size) {
        this.page.size = size,
          this.loadGridData()
      },
      handlePageChange(current) {
        this.page.current = current,
          this.loadGridData()
      },
      loadGridData() {
        this.listLoading = true;
        let param = {
          pageSize: this.page.size,
          page: this.page.current,
          code: this.search.code,
          orderId: this.search.orderId,
          courierName: this.search.courierName,
          address: this.search.address
        };
        this.axios.get("/shipments", { params: param }).then(response => {
          this.page = response.data,
            this.listLoading = false
        })
      },
      handleSearch() {
        this.loadGridData()
      },
      handleDetail(row) {
        this.$router.push(`/shipments/${row.orderId}`)
      }
    }
  }

</script>